import React from 'react'
import Taro from '@tarojs/taro'
import { AtTabBar } from 'taro-ui'
import 'taro-ui/dist/style/components/tab-bar.scss'
import 'taro-ui/dist/style/components/badge.scss'

import './index.less'

const ALLTABS ={
  'ADMINISTRATOR': [
    {
      pagePath: '/pages/index/index',
      title: '首页',
      image: '../assets/images/home.png',
      selectedImage: '../assets/images/home-select.png',
    },
    {
      pagePath: '/pages/about/index',
      title: '我的',
      image: '../assets/images/about.png',
      selectedImage: '../assets/images/about-select.png'
    },
  ],
  'MOTORCADE': [
    {
      pagePath: '/pages/index/index',
      title: '首页',
      image: '../assets/images/home.png',
      selectedImage: '../assets/images/home-select.png',
    },
    {
      pagePath: '/pages/refuel/index',
      title: '加油',
      image: '../assets/images/refuel.png',
      selectedImage: '../assets/images/refuel-select.png',
    },
    {
      pagePath: '/pages/about/index',
      title: '我的',
      image: '../assets/images/about.png',
      selectedImage: '../assets/images/about-select.png'
    }
  ],
  'DRIVER': [
    {
      pagePath: '/pages/index/index',
      title: '首页',
      image: '../assets/images/home.png',
      selectedImage: '../assets/images/home-select.png',
    },
    {
      pagePath: '/pages/refuel/index',
      title: '加油',
      image: '../assets/images/refuel.png',
      selectedImage: '../assets/images/refuel-select.png',
    },
    {
      pagePath: '/pages/about/index',
      title: '我的',
      image: '../assets/images/about.png',
      selectedImage: '../assets/images/about-select.png'
    }
  ],
  'OPERATOR': [
    {
      pagePath: '/pages/scanQRCode/index',
      title: '扫码加油',
      image: '../assets/images/scan.png',
      selectedImage: '../assets/images/scan-select.png',
    },
    {
      pagePath: '/pages/fightingDetalis/index',
      title: '历史订单',
      image: '../assets/images/order.png',
      selectedImage: '../assets/images/order-select.png',
    },
    {
      pagePath: '/pages/about/index',
      title: '我的',
      image: '../assets/images/about.png',
      selectedImage: '../assets/images/about-select.png'
    }
  ]
}

export default class CustomTabBar extends React.Component {
  constructor() {
    console.log(1);
    super()
    this.state = {
      tabList: [],
      current: 0
    }
  }
  async componentWillMount() {
    const res = await Taro.getStorage({key: 'userInfo'})
    const { data } = res
    const {user: {role}} = JSON.parse(data)
    const tabList = ALLTABS[role]
    const { route } = Taro.getCurrentPages()[0]
    const current = tabList.findIndex((item) => item.pagePath == `/${route}`)
    // console.log(current);  
    this.setState({
      tabList,
      // current
    })
  }
  onLaunch() {
    console.log(22);
  }
  onReady() {
    console.log('load');
  }
  handleClick(e) {
    const { tabList } = this.state
    Taro.switchTab({url: tabList[e].pagePath})
    
  }
  onTabItemTap(e) {
    console.log(e);
  }


 
  render() {
    console.log('render');
    const { tabList, current } = this.state
    return <AtTabBar fixed tabList={tabList} current={current} onClick={this.handleClick.bind(this)} />
  }
}